<template>
  <div>
    <div>
      <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
        <el-form-item label="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="pwd">
          <el-input type="password" v-model="form.pwd"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">立即添加</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="id" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>密码: {{ scope.row.pwd }}</p>
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.name }}</el-tag>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="个人信息" :visible.sync="dialogFormVisible">
      <el-form :model="updateform">
        <el-form-item label="name" :label-width="formLabelWidth">
          <el-input v-model="updateform.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="pwd" :label-width="formLabelWidth">
          <el-input type="password" v-model="updateform.pwd"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmupdate">确 定</el-button>
      </div>
    </el-dialog>
    <el-button type="success" round @click="requireData">成功按钮</el-button>
  </div>
</template>

<script>
  export default {
    name: "user",
    data() {
      return {
        form: {
          name: '',
          pwd: ''
        },
        updateform: {
          id: '',
          index: '',
          name: '',
          pwd: ''
        },
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '150px'
      }
    },
    created: function () {  //自动请求数据并渲染
      this.$get().then(resp => {
        this.tableData = resp
      }).catch()
    },
    methods: {
      onSubmit(form) { //添加
        let data = {
          name: this.form.name,
          pwd: this.form.pwd
        };
        this.$post('', data).then(resp => {
          this.tableData.push(resp); //将新添加数据放进tableData数组里，会自动触发表格渲染
        }).catch();
      },
      handleEdit(index, row) { //更新
        // console.log(index, row);
        this.dialogFormVisible = true;//打开对话框
        this.updateform = Object.assign({}, row, {index: index}); //打开对话框，将对应数据映射到表单上
      },
      handleDelete(index, row) { //删除
        this.$del("/" + row.id).then(resp => {
          this.tableData.splice(index, 1); //删除元素，自动触发表格渲染
        }).catch();
        // console.log(index, row);
      },
      confirmupdate() {
        let data = {
          name: this.updateform.name,
          pwd: this.updateform.pwd
        };
        this.$put("/" + this.updateform.id, data).then(resp => {
          this.dialogFormVisible = false;
          this.tableData.splice(this.updateform.index, 1, resp);  //更新数据
        }).catch();
      },
      requireData() {
        this.$ajax.create({withCredentials:true}).get('http://localhost:9090/user/all')
          .then(resp => {
            console.log(resp.data)
          });
      }
    }
  }
</script>

<style scoped>

</style>
